<template>
  <div ref="myChart" style="height: 100%"></div>
</template>
<script>
export default {
  name: 'xmssPie',
  props: {
    types: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      myChart: undefined
    }
  },
  created() {},
  mounted() {
    this.drawLine()
    window.addEventListener('resize', this.resize())
  },
  watch: {
    types: {
      handler(val) {
        this.drawLine()
      },
      deep: true
    }
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.myChart)

      let yLabel = ['专家人员数量', '外部审计人员', '外部审计机构', '下级机构人员', '审计人员数量']
      let yData = this.types.length ? this.types : [100, 150, 15, 160, 30]
      let bgData = []
      for (let i in yData) {
        bgData.push(2000)
      }

      let colors = ['#0048af', '#ee9646', '#35c0db', '#a665c1', '#8cabf8']
      myChart.setOption({
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          show: false,
          type: 'log'
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              margin: 15,
              textStyle: {
                color: 'rgba(0, 0, 0, .6)'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: yLabel
          },
          {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: '#174594',
                fontSize: '12'
              },

              formatter: (params, index) => {
                if (yLabel[index] == '外部审计机构') {
                  return `${params}家`
                } else {
                  return `${params}人`
                }
              }
            },
            data: yData
          }
        ],
        series: [
          {
            name: '人数',
            type: 'bar',
            showBackground: true,
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: [30, 30, 30, 30],
                color: params => {
                  // console.log(params,'para');
                  return colors[params.dataIndex]
                },
                shadowBlur: 0,
                shadowColor: 'rgba(87,220,222,0.7)'
              }
            },
            barWidth: 12,
            data: yData
          },
        ]
      })
      this.myChart = myChart
    },
    resize() {
      this.myChart.resize()
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize())
  }
}
</script>

<style scoped>
</style>